<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
            color: #721c24;
        }
        h1 {
            text-align: center;
            color: #333;
            margin: 20px 0;
        }
        table {
            margin: 0 auto;
            width: 800px;
            border-collapse: collapse;
            color: #004085;
        }
        th {
            padding: 10px;
            background: #cfe5ff;
            font-size: 20px;
            font-weight: 400;
        }
        td,th {
            border: 1px solid #b8daff;
        }
        td {
            padding: 10px;
            color: #666;
            text-align: center;
            font-size: 16px;
        }
        tbody tr {
            background: #fff;
        }
        tbody tr:hover {
            background: #e1ecf8;
        }
        .info {
            width: 900px;
            margin: 50px auto;
            text-align: center;
        }
        .info input, .info select {
            width: 80px;
            height: 27px;
            outline: none;
            border-radius: 5px;
            border: 1px solid #b8daff;
            padding-left: 5px;
            box-sizing: border-box;
            margin-right: 15px;
        }
        .info button {
            width: 60px;
            height: 27px;
            background-color: #004085;
            outline: none;
            border: 0;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
        }
        .info .age {
            width: 50px;
        }
    </style>
</head>
<body>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
        姓名：<input type="text" class="uname" name="uname"/>
        年龄：<input type="text" class="age" name="age"/>
        性别：
        <select name="gender" class="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        薪资：<input type="text" class="salary" name="salary"/>
        就业城市：<select name="city" class="city">
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="曹县">曹县</option>
        </select>
        <button class="add">录入</button>
    </form>
    <h1>就业榜</h1>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>就业城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        // //获取元素
        // const uname = document.querySelector('.uname')
        // const age = document.querySelector('.age')
        // const gender = document.querySelector('.gender')
        // const salary = document.querySelector('.salary')
        // const city = document.querySelector('.city')
        // const tbody = document.querySelector('tbody')
        // //获取所有带有name属性的元素
        // const items = document.querySelectorAll('[name]')
        
        // //声明一个空的数组，增加和删除都是对这个数组进行操作
        // const arr = []
        // //1.录入模块
        // //1.1 表单提交事件
        // const info = document.querySelector('.info')
        // info.addEventListener('submit', function(e){
        //     //阻止默认行为 不跳转
        //     e.preventDefault()
        //     //这里进行表单验证 如果不通过，直接中断  不需要添加数据
        //     //先遍历循环
        //     for (let i = 0; i< items.length; i++){
        //         if(items[i].value === ''){
        //             return alert('输入内容不能为空')
        //         }
        //     }

        //     //创建新的对象
        //     const obj = {
        //         stuId: arr.length + 1,
        //         uname: uname.value,
        //         age: age.value,
        //         gender: gender.value,
        //         salary: salary.value,
        //         city: city.value
        //     }
        //     //追加到数组
        //     arr.push(obj)
        //     //清空表单
        //     this.reset()
        //     //调用渲染函数
        //     render()
        // })

        // //2.渲染函数
        // function render(){
        //     //先清空tbody 把最新数组里面的数据渲染完毕
        //     tbody.innerHTML = ''
        //     //遍历数组
        //     for(let i = 0; i <tr arr.length; i++){
        //         //生成tr
        //         const tr = document.createElement('tr')
        //         tr.innerHTML = `
        //             <td>${arr[i].stuId}</td>
        //             <td>${arr[i].uname}</td>
        //             <td>${arr[i].age}</td>
        //             <td>${arr[i].gender}</td>
        //             <td>${arr[i].salary}</td>
        //             <td>${arr[i].city}</td>
        //             <td>
        //                 <a href="javascript:" data-id=${i}>删除</a>
        //             </td>
        //         `
        //         //追加元素  父元素.appendChild(子元素)
        //         tbody.appendChild(tr)
        //     }
        // }
        // //3.删除操作
        // //3.1 事件委托 tbody
        // tbody.addEventListener('click', function(e){
        //     if(e.target.tagName === 'A'){
        //         //得到当前元素的自定义属性 data-id
        //         arr.splice(e.target.dataset.id, 1)
        //         render()
        //     }
           
        // })
        

        //1.读取本地存储的数据
        const data = localStorage.getItem('student-data')
        //2.如果有就返回对象，没有就声明一个空的数组
        const arr = data ? JSON.parse(data) : []
        
        // 获取tbody
        const tbody = document.querySelector('tbody')
        //3.渲染模块函数
        function render(){
            //遍历数组 有几个对象就生成几个tr 然后追击给tbody
            //map返回的是个数组 [tr,tr]
            const trArr = arr.map(function(item, i){
                //console.log(item);
                return `
                <tr>
                    <td>${item.stuId}</td>
                    <td>${item.uname}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td>
                    <td>${item.salary}</td>
                    <td>${item.city}</td>
                    <td>
                        <a href="javascript:" data-id = ${i}>删除</a>
                    </td>
                </tr>
                `
            })
            // console.log(trArr);
            //追加给tbody
            //因为trArr是个数组，我们不要数组，我们要的是tr的字符串
            tbody.innerHTML = trArr.join('')

        }
        render()

        //4.录入模块
        const info = document.querySelector('.info')
        // 获取表单form 里面带有name 属性的元素
        const items = info.querySelectorAll('[name]')

        info.addEventListener('submit', function(e){
            //阻止提交
            e.preventDefault()
            //声明空的对象
            const obj = {}
            //假如有2条数据
            obj.stuId = arr.length ? arr[arr.length - 1].stuId + 1 : 1
            // stuId比较特殊 追加形式写入
            //obj.stuId = arr.length + 1
            //非空判断
            for(let i = 0 ; i < items.length; i++){
                // console.log(items) //数组里面包含5个表单
                // console.log(items[i])//里面的每一个表单对象
                // console.log(items[i].name)// 对应的属性名
                const item = items[i]
                if(items[i].value === ''){
                    return alert('输入内容不能为空')
                }
                // console.log(item.name); uname age gender
                // obj[item.name] === obj.name  obj.age
                obj[item.name] = item.value
            }
            //追加给数组
            arr.push(obj)
            //把数组 arr 存储到本地存储里面
            localStorage.setItem('student-data', JSON.stringify(arr))
            //渲染页面
            render()
            //重置表单
            this.reset()
        })

        //5.删除模块
        tbody.addEventListener('click', function(e){
            if(e.target.tagName === 'A'){
                //删除数组对应的这个数据
                arr.splice(e.target.dataset.id, 1)
                //写入本地存储
                localStorage.setItem('student-data', JSON.stringify(arr))
                //重新渲染
                render()
            }
        })
    </script>
</body>
</html>